<template>
  <div class="main">
    <div>
      <!-- 按月统计每天注册人数 -->
      <div>
        <div class="input-box">
          <el-form-item label="选择月份：">
            <el-date-picker v-model="dateym" type="month" @change="initUserByYearMonthEcharts" value-format="YYYY/MM" />
          </el-form-item>
        </div>
        <div ref="div_echartsym" class="echarts"></div>
      </div>

      <!-- 按年统计每天注册人数 -->
      <div>
        <div class="input-box">
          <el-form-item label="选择年份：">
            <el-date-picker v-model="datey" type="year" @change="initUserByYearEcharts" value-format="YYYY" />
          </el-form-item>
        </div>
        <div ref="div_echartsy" class="echarts"></div>
      </div>
    </div>

    <!-- 总注册人数 -->
    <div style="padding-top: 10vh">
      <div ref="div_echarts" class="echarts"></div>
    </div>

    <BackToHome />
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { log } from '../../ts/logger'
import { Tools } from '../../ts/Tools'
import { ApiService } from '../../ts/ApiService'
import { BaseDataResult } from '../../ts/types/BaseResult'
import { ChartData } from '../../ts/types/Charts'
import { ElMessage } from 'element-plus'
import BackToHome from '../../components/BackToHomeComp.vue'

//#region 按月统计每天注册人数
const dateym = ref(Tools.formatDate(new Date(), 'yyyy/MM'))
const div_echartsym = ref(null)
const chartym = ref({} as echarts.EChartsType)
const optionsym = ref({
  title: {
    text: '月注册人数',
    left: 'center',
    textAlign: 'center',
  },
  xAxis: {
    data: [] as Array<String>,
  },
  yAxis: {},
  series: [
    {
      data: [] as Array<Number>,
      type: 'bar',
    },
  ],
})

const initUserByYearMonthEcharts = () => {
  // chart.value.setOption(options.value)
  ApiService.get(`/charts/user/${dateym.value}`, '', (data: BaseDataResult<ChartData>) => {
    if (data.success) {
      optionsym.value.xAxis.data = data.data.axis
      optionsym.value.series[0].data = data.data.series
      chartym.value.setOption(optionsym.value as echarts.EChartOption)
    } else {
      ElMessage.error(data.message)
    }
  })
}
//#endregion

//#region 按月统计每天注册人数
const datey = ref(Tools.formatDate(new Date(), 'yyyy'))
const div_echartsy = ref(null)
const charty = ref({} as echarts.EChartsType)
const optionsy = ref({
  title: {
    text: '年注册人数',
    left: 'center',
    textAlign: 'center',
  },
  xAxis: {
    data: [] as Array<String>,
  },
  yAxis: {},
  series: [
    {
      data: [] as Array<Number>,
      type: 'line',
    },
  ],
})

const initUserByYearEcharts = () => {
  ApiService.get(`/charts/user/${datey.value}`, '', (data: BaseDataResult<ChartData>) => {
    if (data.success) {
      optionsy.value.xAxis.data = data.data.axis
      optionsy.value.series[0].data = data.data.series
      charty.value.setOption(optionsy.value as echarts.EChartOption)
    } else {
      ElMessage.error(data.message)
    }
  })
}
//#endregion

//#region 总注册人数
const div_echarts = ref(null)
const chart = ref({} as echarts.EChartsType)
const options = ref({
  // 显示提示信息
  tooltip: {
    trigger: 'item',
  },
  // 显示数据文本
  emphasis: {
    label: {
      show: true,
      fontWeight: 'bold',
    },
  },
  // 上方图示
  legend: {
    top: '5%',
    left: 'center',
  },
  title: {
    text: '总注册人数',
    left: 'center',
    textAlign: 'center',
  },
  // xAxis: {
  //   // data: [] as Array<String>,
  // },
  // yAxis: {},
  series: [
    {
      avoidLabelOverlap: false,
      radius: ['40%', '70%'],
      data: [] as Array<Object>,
      type: 'pie',
    },
  ],
})

const initUserEcharts = () => {
  ApiService.get(`/charts/user`, '', (data: BaseDataResult<ChartData>) => {
    if (data.success) {
      // options.value.xAxis.data = data.data.axis
      let datas = []
      for (let i = 0; i < data.data.axis.length; i++) {
        let info = data.data.axis[i]
        datas.push({ value: data.data.series[i], name: info + '年' })
      }
      options.value.series[0].data = datas
      chart.value.setOption(options.value as echarts.EChartOption)
    } else {
      ElMessage.error(data.message)
    }
  })
}
//#endregion

onMounted(() => {
  log.debug('页面元素：', div_echartsym.value)
  chartym.value = echarts.init(div_echartsym.value, null, { renderer: 'svg' })
  initUserByYearMonthEcharts()
  charty.value = echarts.init(div_echartsy.value)
  initUserByYearEcharts()
  chart.value = echarts.init(div_echarts.value)
  initUserEcharts()
})
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  text-align: center;
  > div:first-of-type {
    flex: 6;
    .echarts {
      width: 100%;
      height: 40vh;
    }
    .input-box {
      padding: 1rem;
      display: flex;
      justify-content: center;
    }
  }
  > div:last-of-type {
    flex: 4;
    .echarts {
      box-sizing: border-box;
      width: 90%;
      // 让高度为宽度的值
      height: calc(90% - 1rem);
    }
  }
}
</style>
